<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #box,#ul{
            width: 150px;
            height: 300px;
            border:1px dashed black;
            text-align: center;
            line-height: 300px;
        }
        #box{
            float: left;
        }
        #ul{
            float: right;
            border: 0;
        }
        li{
            height: 60px;
            border: 1px dashed;
            cursor: move;
            line-height: 60px;
        }
        img{
            display: none;
        }
    </style>
</head>
<body>
    <div id="box"> 垃圾回收箱 </div>
    <ul id="ul">
        <li draggable="true">0</li>
        <li draggable="true">1</li>
        <li draggable="true">2</li>
        <li draggable="true">3</li>
        <li draggable="true">4</li>
    </ul>
    <img src="save.png" id="img" alt="">
    <script>
        var aLi = ul.getElementsByTagName('li');
        var oImg = document.getElementById('img');
        for( var i=0;i<aLi.length;i++ ){
            aLi[i].index = i;
            aLi[i].ondragstart = function(e){
                var e = e || event;
                //console.log( e.dataTransfer );
                e.dataTransfer.setData('abc',this.index);
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setDragImage(oImg,'50px','50px');
                this.style.background = 'pink';
            };
            aLi[i].ondrag = function (e) {
                var e = e || event;
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setDragImage(oImg,'50px','50px');
                console.log(e.dataTransfer);


            };
        }
        box.ondragover = function(e){
            var e = e || event;
            e.preventDefault();
        };
        box.ondrop = function(e){
            var e = e || event;
            //console.log(e.dataTransfer.getData('abc'))
            //console.log( aLi[e.dataTransfer.getData('abc')] );
            ul.removeChild( aLi[4] );
        }
    </script>
</body>
</html>